/** 产品页面 */
import React from "react";
import { Button, Divider, Skeleton, Table, Typography } from 'antd';
import HeaderEditButton from "../../../HearderEditButton";
import './index.less';

const { Title, Paragraph } = Typography

interface IProps {
  selectedKey: string;
}
const ProductContent: React.FC<IProps> = ({ selectedKey }) => {

  // 骨架屏
  const [active, setActive] = React.useState(true);
  React.useEffect(() => {
    // 请求数据
  }, []);

  const dataSource = {
    productSpecification: [
      {
        specification: '1',
        description: '1'
      },
      {
        specification: '2',
        description: '2'
      },
      {
        specification: '3',
        description: '3'
      },
      {
        specification: '4',
        description: '4'
      },
      {
        specification: '5',
        description: '5'
      },
      {
        specification: '6',
        description: '6'
      },
      {
        specification: '7',
        description: '7'
      }
    ]
  }

  const columns = [
    {
      title: 'Specification',
      dataIndex: 'specification',
      key: 'specification',
    },
    {
      title: 'Description',
      dataIndex: 'description',
      key: 'description',
    },
  ];
  return (
    <div className="products-container">
      {/* 隐藏编辑逻辑 */}
      {/* <HeaderEditButton productName={selectedKey} /> */}
      <Typography>
        <Title>{selectedKey}</Title>
        <Paragraph>地球表面上空50~1000km左右为电离层，太阳活动发射的高能粒子引起该区域中性大气的电离，产生带电粒子，进而形成电离层这一区域。
          假设电离层所有带电粒子集中于高度450km的单层薄壳，将其展开，可以得到的矩形（经度×纬度）。取经向步长为，取纵向步长为，则该矩形可被划分成个方格，并有=5183个格网点。</Paragraph>
      </Typography>
      <Skeleton.Image active={active} style={{
        width: '960px',
        height: '420px'
      }} />
      <Typography>
        <Paragraph>地球表面上空50~1000km左右为电离层，太阳活动发射的高能粒子引起该区域中性大气的电离，产生带电粒子，进而形成电离层这一区域。
          假设电离层所有带电粒子集中于高度450km的单层薄壳，将其展开，可以得到的矩形（经度×纬度）。取经向步长为，取纵向步长为，则该矩形可被划分成个方格，并有=5183个格网点。</Paragraph>
      </Typography>
      <h2>产品规格</h2>
      <Table dataSource={dataSource.productSpecification} columns={columns} pagination={false} />
    </div>
  )

}

export default ProductContent;